import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ty_smart_watch/bean/body_data_bean.dart';
import 'package:ty_smart_watch/page/watch_setting_page/controller/watch_data_controller.dart';

class BodyGrid extends StatelessWidget {
  final String mac;

  BodyGrid({super.key, required this.mac});

  final WatchDataController _controller = Get.put(WatchDataController());

  @override
  Widget build(BuildContext context) {
    _controller.getBleData(mac);
    return Container(
      margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
      child: Obx(
        () => GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, childAspectRatio: 1.5, mainAxisSpacing: 10, crossAxisSpacing: 10),
          itemCount: _controller.list.length,
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: () {
                print('Clicked on ${_controller.list[index].title}');
              },
              child: BodyDataItem(bodyData: _controller.list[index]),
            );
          },
        ),
      ),
    );
  }
}

class BodyDataItem extends StatelessWidget {
  BodyDataItem({super.key, required this.bodyData});

  final BodyDataBean bodyData;

  @override
  Widget build(BuildContext context) {
    BoxDecoration decoration = BoxDecoration(
      //圆角半径
      borderRadius: const BorderRadius.all(Radius.circular(12.0)),
      color: Color(bodyData.color),
    );

    return Container(
      padding: const EdgeInsets.all(10),
      decoration: decoration,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset(bodyData.icon, width: 20, height: 20),
          Text(bodyData.title, style: TextStyle(fontSize: 12)),
          Container(height: 20),
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                bodyData.data,
                style: TextStyle(fontSize: 20, height: 1.2),
              ),
              Container(width: 6),
              Text(bodyData.unit)
            ],
          )
        ],
      ),
    );
  }
}
